import { CarType } from '@/types/practice';
<template>
  <div class="min-h-screen">
    <div class="px-5 py-5 bg-blue">
      <div class="text-2xl c-gray-7 text-white">模考历史</div>
    </div>

    <div class="flex justify-evenly text-center py-5 border-b-2 border-gray-200">
      <div>
        <div class="flex justify-center items-end my-1">
          <div class="mr-1 text-3xl">{{ examNumber?.examCount }}</div>
          <span class="text-base"> 次</span>
        </div>
        <div class="text-gray-500 text-sm">总次数</div>
      </div>
      <div>
        <div class="flex justify-center items-end my-1">
          <div class="mr-1 text-3xl text-green-600">{{ examNumber?.passesCount }}</div>
          <span class="text-base"> 次</span>
        </div>
        <div class="text-gray-500 text-sm">合格数</div>
      </div>
      <div>
        <div class="flex justify-center items-end my-1">
          <div class="mr-1 text-3xl text-rose-600">{{ examNumber ? examNumber.examCount - examNumber.passesCount : "-" }}</div>
          <span class="text-base"> 次</span>
        </div>
        <div class="text-gray-500 text-sm">不合格数</div>
      </div>
    </div>

    <div class="text-xl py-2 px-4 border-solid">我的模考</div>
    <!-- 记录列表 -->
    <div v-for="(item, index) in detailHistory" :key="item.id" class="px-4">
      <div class="py-4 border-solid border-b-1 border-gray-200 flex justify-around items-end">
        <div class="bg-blue text-white text-sm rounded-full w-8 h-8 overflow-hidden flex justify-center items-center">{{ index + 1 }}</div>
        <div>{{ carTypeMap[item.carType] }}</div>
        <div>{{ subjectMap[item.subject] }}</div>
        <div class="flex items-end" :class="item.score > 60 ? 'text-green-600' : 'text-red-600'">
          <div class="font-bold mr-0.5">{{ item.score }}</div>
          <div>分</div>
        </div>
        <div class="text-gray-400">{{ dayjs(item.createTime).format("YYYY-MM-DD") }}</div>
        <div class="" :class="item.score > 60 ? 'text-green-600' : 'text-red-600'">{{ item.passed ? "合格" : "不合格" }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CarType, Subject } from "@/types/practice";
import { carTypeMap, subjectMap } from "./common";
import { ref } from "vue";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { AppMemberPaperSummaryRespVO, PaperRecord, getMemberPaperSummary, getMemberPaperRecord } from "@/api/train/paper";

const route = useRoute();

const { carType = CarType.A1, subject = Subject.ONE } = route.query as { carType?: CarType; subject?: Subject };

let examNumber = ref<AppMemberPaperSummaryRespVO>();

const params: PageParams = {
  pageNo: 1,
  pageSize: 10,
};
let detailHistory = ref<PaperRecord[]>([]);

// 考试次数记录
const init = async () => {
  const { data } = await getMemberPaperSummary(carType, subject);
  examNumber.value = data;
};

const getExamHistory = async () => {
  const { data } = await getMemberPaperRecord({ ...params, carType, subject });
  detailHistory.value = data.list;
};

getExamHistory();
init();
</script>
